<template>
    <div class="child">
        <h3>子组件</h3>
        姓名: <input type="text" :value="username" @input="updateUsername"><br>
        密码: <input type="password" :value="password" @input="updatePassword"><br>
        <!--
        姓名: 是一个文本提示。
            <input type="text"> 创建一个文本输入框。
            :value="username" 绑定输入框的值到 username，这个属性来自父组件。
            @input="updateUsername"：当输入框内容发生变化时，触发 updateUsername 方法
        -->
    </div>
</template>

<script lang="ts" setup name="ChildCompoment">
import { defineProps, defineEmits } from 'vue';
/*
import { defineProps, defineEmits } from 'vue';：从 Vue 中导入 defineProps 
和 defineEmits，这两个函数用于定义组件的属性和事件。
*/
const props = defineProps({
    username: String,
    password: String,
});
const emit = defineEmits(['update:username', 'update:password']);
/*
const emit = defineEmits([...]);：使用 defineEmits 定义可以触发的事件。在这个组件中，
声明了两个事件 update:username 和 update:password，这些事件将在输入变化时发出，通知父组件。
*/
const updateUsername = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    emit('update:username', value); // 向父组件发送更新的用户名
};
/*
const updateUsername = (event: Event) => {...};：定义了一个函数 updateUsername，
当用户名输入框的内容改变时被调用。
const value = (event.target as HTMLInputElement).value;：获取输入框的当前值。
emit('update:username', value);：通过 emit 触发 update:username 事件，并将当前的值传递给父组件。
*/
const updatePassword = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    //event.target 的类型是 HTMLInputElement。这样做是为了获得输入框特有的属性和方法，比如 value。
    emit('update:password', value); // 向父组件发送更新的密码
};
</script>

<style scoped>
.child {
    background-color: rgb(200, 200, 200);
    padding: 10px;
    border-radius: 5px;
}
</style>